<template>
<h2>{{x}} : {{y}}</h2>
<section class="todoapp">
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
  <header class="header">
    <h1>Vue3 todos</h1>
    <input class="new-todo"
      placeholder="想干的事"
      v-model="newTodo"
      @keyup.enter="addTodo" />
  </header>
  <section class="main" v-show="todos.length" >
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li v-for="todo in todos"
        class="todo"
        :key="todo.id"
        :class="{ completed: todo.completed }"
        >
        <div class="view">
            <input @dblclick="edit(todo)" class="toggle" type="checkbox" v-model="todo.completed" />
            <input 
                v-if="todo.edit"  
                type="text" 
                v-model="todo.title" 
                v-todo-focus="true"
                class="edit" 
                style="display: block" 
                @blur="doneEdit(todo)"
                @keyup.enter="doneEdit(todo)"
                @keyup.esc="cancelEdit(todo)"
            />
          <label v-else>{{ todo.title }}</label>
          <button v-if="!todo.edit" class="destroy" @click="removeTodo(todo)"></button>
        </div>
      </li>
    </ul>
  </section>
  <footer class="footer" v-show="todos.length" v-cloak>
    <span class="todo-count">
      <strong>{{ remaining }}</strong>  left
    </span>
    <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
      Clear completed
    </button>
  </footer>

</section>
</template>

<script>
import {ref,reactive,toRefs, computed} from 'vue'
import useMousePosition from './mouse.js'
export default {
  setup(props, ctx){
      console.log(ctx)
    function edit(todo){
        todo.edit = true
    }
    function doneEdit(todo){
        todo.edit=false
    }
    const state = reactive({
      newTodo:'',
      todos: [
        { id: "1", title: "吃饭", completed: false },
        { id: "2", title: "睡觉", completed: false }
      ],
    })
    function addTodo(){
      var value = state.newTodo && state.newTodo.trim()
      if (!value) {
        return
      }
      state.todos.push({
        id: state.todos.length + 1,
        title: value,
        completed: false
      })
      state.newTodo = ""
    }

    function removeTodo(todo){
        state.todos = state.todos.filter(item => item.id !== todo.id)
    }

    const remaining = computed(
      () => state.todos.filter(todo => !todo.completed).length
    );
    const allDone = computed({
      get: function() {
        return remaining.value === 0;
      },
      set: function(value) {
        state.todos.forEach(function(todo) {
          todo.completed = value;
        });
      }
    });
    function removeCompleted() {
      state.todos = state.todos.filter(todo => !todo.completed);
    }

    const {x,y} = useMousePosition()
    return {
      ...toRefs(state),
      addTodo,
      removeTodo,
      remaining,
      allDone,
      removeCompleted,
      edit,
      doneEdit,
      x,y
    }
  },
  directives: {
    "todo-focus": function(el, binding) {
      if (binding.value) {
        el.focus();
      }
    }
  }
}
</script>